<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- 讲师列表 -->
    <section class="container">
      <header class="comm-title all-teacher-title">
        <h2 class="fl tac">
          <span class="c-333">全部讲师</span>
        </h2>
        <section class="c-tab-title">
          <a id="subjectAll" title="全部" href="#">全部</a>
        </section>
      </header>

      <section class="c-sort-box unBr">
        <div>
          <!-- 无数据提示 -->
          <section class="no-data-wrap" v-if="teacherList.length === 0">
            <em class="icon30 no-data-ico">&nbsp;</em>
            <span class="c-666 fsize14 ml10 vam">没有相关数据，鼠鼠正在努力整理中...</span>
          </section>

          <!-- 有数据时展示讲师列表 -->
          <article class="i-teacher-list" v-if="teacherList.length > 0">
            <ul class="of">
              <li v-for="item in teacherList" :key="item.id">
                <section class="i-teach-wrap">
                  <div class="i-teach-pic">
                    <a :href="'/teacher/' + item.id" :title="item.name" target="_blank">
                      <img :src="item.avatar || defaultAvatar" :alt="item.name" />
                    </a>
                  </div>
                  <div class="mt10 hLh30 txtOf tac">
                    <a :href="'/teacher/' + item.id" :title="item.name" target="_blank"
                       class="fsize18 c-666">{{ item.name }}</a>
                  </div>
                  <div class="hLh30 txtOf tac">
                    <span class="fsize14 c-999">{{ item.intro }}</span>
                  </div>
                  <div class="mt15 i-q-txt">
                    <p class="c-999 f-fA">{{ item.career }}</p>
                  </div>
                </section>
              </li>
            </ul>
            <div class="clear"></div>
          </article>
        </div>

        <!-- 公共分页 -->
        <div class="paging" v-if="data.total > 0">
          <a :class="{ undisable: !data.hasPrevious }" href="#" @click.prevent="gotoPage(1)">首页</a>
          <a :class="{ undisable: !data.hasPrevious }" href="#" @click.prevent="gotoPage(data.current - 1)">&lt;</a>

          <a v-for="page in pageList"
             :key="page"
             :class="{ current: data.current === page, undisable: data.current === page }"
             href="#"
             @click.prevent="gotoPage(page)">
            {{ page }}
          </a>

          <a :class="{ undisable: !data.hasNext }" href="#" @click.prevent="gotoPage(data.current + 1)">&gt;</a>
          <a :class="{ undisable: !data.hasNext }" href="#" @click.prevent="gotoPage(data.pages)">尾页</a>
          <div class="clear"></div>
        </div>
      </section>
    </section>
  </div>
</template>

<script>
import teacherApi from '@/api/teacher'

export default {
  data() {
    return {
      teacherList: [],
      defaultAvatar: 'https://via.placeholder.com/200x200?text=No+Avatar',
      data: {
        total: 0,
        current: 1,
        size: 8,
        pages: 0,
        hasNext: false,
        hasPrevious: false
      }
    }
  },
  created() {
    this.getTeacher(this.data.current, this.data.size)
  },
  computed: {
    pageList() {
      const totalPages = this.data.pages
      const current = this.data.current
      const range = 5
      let start = Math.max(1, current - Math.floor(range / 2))
      let end = Math.min(totalPages, start + range - 1)
      if (end - start < range - 1) {
        start = Math.max(1, end - range + 1)
      }
      const pages = []
      for (let i = start; i <= end; i++) {
        pages.push(i)
      }
      return pages
    }
  },
  methods: {
    async getTeacher(current, size) {
      try {
        const res = await teacherApi.getTeacherList(current, size, null)
        if (res.data.code === 20000) {
          this.teacherList = res.data.data.records
          const total = res.data.data.total
          const pages = Math.ceil(total / size)
          this.data = {
            total,
            current,
            size,
            pages,
            hasNext: current < pages,
            hasPrevious: current > 1
          }
        } else {
          this.$message && this.$message.error(res.data.message || '获取讲师失败')
        }
      } catch (err) {
        console.error(err)
        this.$message && this.$message.error('请求讲师数据失败')
      }
    },
    gotoPage(page) {
      if (page !== this.data.current && page >= 1 && page <= this.data.pages) {
        this.getTeacher(page, this.data.size)
      }
    }
  }
}
</script>

<style scoped>
.paging a {
  margin: 0 4px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  color: #333;
  text-decoration: none;
  border-radius: 3px;
}

.paging a.current {
  background-color: #409EFF;
  color: #fff;
  border-color: #409EFF;
}

.paging a.undisable {
  color: #ccc;
  pointer-events: none;
}
</style>
